<!--
 * @Descripttion: 
 * @Author: Wang Dejiang(aei)
 * @Date: 2022-07-23 00:00:59
 * @LastEditors:Liu Yaxin
 * @LastEditTime: 2022-07-23 17:03:39
-->
<template>
  <div  style="display:flex; justify-content: center;">
    <div id="main">
    </div>
    <div id="main1"></div>
  </div>
</template>

<script>
    export default {
        name: 'Test4',
    mounted() {
     const chartDom = document.getElementById('main')
     const myChart = this.$echarts.init(chartDom,'dark'); //,'westeros'
     const chartDom1 = document.getElementById('main1')
     const myChart1 = this.$echarts.init(chartDom1,'westeros');
     let option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);

      let option1 = {
      legend: {},
      tooltip: {},
      dataset: {
      source: [
          ['product', '2012', '2013', '2014', '2015'],
          ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],
          ['Milk Tea', 86.5, 92.1, 85.7, 83.1],
          ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]
      ]
      },
      xAxis: [
        { type: 'category', gridIndex: 0 },
        { type: 'category', gridIndex: 1 }
      ],
      yAxis: [{ gridIndex: 0 }, { gridIndex: 1 }],
      grid: [{ bottom: '55%' }, { top: '55%' }],
      series: [
        // 这几个系列会出现在第一个直角坐标系中，每个系列对应到 dataset 的每一行。
        { type: 'bar', seriesLayoutBy: 'row' },
        { type: 'bar', seriesLayoutBy: 'row' },
        { type: 'bar', seriesLayoutBy: 'row' },
        // 这几个系列会出现在第二个直角坐标系中，每个系列对应到 dataset 的每一列。
        { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
        { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
        { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
        { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 }
      ]
};
myChart1.setOption(option1);

  },
  methods: {

  }
}
</script>

<style scoped>
  #main {
    height: 500px;
    width: 500px;
  }
  #main1 {
    height: 500px;
    width: 500px;
  }
</style>
